<template>
	<zui-box>
		<!-- 头部导航 -->
		<zui-navbar :have_back="false" title="签到"></zui-navbar>
		<!-- @dateChange 切换时间执行此方法 -->
		<!-- dataSource 给组件已经签到的时间 -->
		
		<u-gap height="30rpx"></u-gap>
		<zui-flat bgColor="#EEAE4F">
			<zui-col height="180rpx">
				<view class="col_price" >待释放 {{gold_releasing_num }} 金元</view>
				<view class="col_text">每日签到可释放当日金元,可以买卖({{this.exchange_num}})克</view>
			</zui-col>
		</zui-flat>
		
		<!-- @clickSign 调用签到方法 -->
		<zui-SignIn ref="child" @dateChange="getRecord" bgday="#00C172" />

		<view class="zui-button">
			<view class="btn_box">
				<button @click="save" class="anBtn"
					:class="!status ? 'yellow' : 'black'">{{ !status ? '立即签到' : '今日已签到' }}</button>
			</view>
		</view>

		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view class="showbox">
				<u-divider text="签到成功" textColor="#FFFFFF" lineColor="#FFFFFF"></u-divider>
			<!-- 	<view class="num">{{ num }}金元奖励</view> -->
				<view class="sm_num">
					可以买卖({{this.exchange_num}})克
				</view>
				<view class="botbox">
					<view>可在我的-金元查看</view>
				</view>
			</view>
			<u-gap height="4vw"></u-gap>
			<view class="btn_box">
				<u-button size='large' shape="circle" color="linear-gradient(to right,#fe423d, #fe722e)" @click="show=false" class="anBtn" >朕知道了</u-button>
			</view>
		</u-popup>
	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				toYear: parseInt(new Date().getFullYear()), //年
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				signData: [],
				order_record: [],
				show: false,
				num: 0,
				status: 0 ,//1-已签到 0-未签到
				gold_releasing_num:'',
				exchange_num:'',//克
			};
		},
		// onLoad() {

		// },
		onShow() {
			//获取接口
			this.step(this.toYear+'-'+this.toMonth);
		},
		methods: {
			//获取接口步骤
			async step(data) {
				//获取数据
				await this.init(data);
				//修改子组件数据
				await this.updata();
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			signDate() {
				console.log('切换');
			},
			getRecord(data) {
				this.step(data);
			},
			init(data) {
				let that = this;
				let time = data;
				return new Promise(function(resolve, reject) {
					uni.$u.http
						.get(`/app/gold_signin/signinPage?month=${time}`, {
							custom: {
								auth: true,
								toast: false,
								catch: false
							}
						})
						.then(res => {
							that.gold_releasing_num = res.gold_releasing_num; 
							that.status = res.today_signin_state; //1-已签到 0-未签到
							that.signData = res.signin_record;
							that.order_record = res.order_record;
							that.exchange_num = res.exchange_num
							console.log('执行第一步')
							resolve(res);
							
						})
						.catch(err => {});
			 })
			},
			updata(){
				this.$refs.child.update(this.signData, this.order_record);
				console.log('执行第二步',this.signData, this.order_record)
			},
			
			save() {
				if(this.status==1){
					return false;
				}
				uni.$u.http
					.get(`/app/gold_signin/doSignin`, {
						custom: {
							auth: true,
							toast: true,
							catch: false
						}
					})
					.then(res => {
						this.num = res.receive_num;
						this.step(this.toYear+'-'+this.toMonth);
						this.show = true;
					})
					.catch(err => {});
			}
		}
	};
</script>

<style lang="scss" lang="scss" scoped>
	
	/deep/.u-divider__text{
		font-size: 36rpx !important;
		font-weight: 800;
	}
	/deep/.u-button--large{
		width: 30vw !important;
	}
	/deep/.u-divider{
		 margin: 15px 0 0 0 !important;
	}
	
	.col_text {
		font-size: 28rpx;
		color: #fff;
	}
	.col_price {
		font-size: 32rpx;
		font-weight: 800;
		color: #fff;
	}
	
	.col_name {
		font-size: 28rpx;
		color: #ffe5a5;
	}
	.col_time {
		font-size: 24rpx;
		color: #ffffff;
	}
	.col_right {
		color: #e73333;
		font-size: 32rpx;
		position: absolute;
		right: 30rpx;
	}
	.right_btn {
		position: absolute;
		width: 146rpx;
		height: 68rpx;
		right: 0;
		/deep/.u-button {
			padding: 0 30rpx;
			border: 0;
			background: #f8e0bb !important;
			box-shadow: -4rpx 0px 8rpx 2rpx rgba(139, 92, 21, 0.3);
			border-radius: 36rpx 0 0 36rpx;
			color: #eeae4f;
		}
	}
	
	
	.sign {
		/* background: url("../../static/sign-bg.png") no-repeat top left; */
		background-size: cover;
	}

	/deep/.u-popup__content {
		width: 70%;
		background: none;
	}

	.showbox {
		width: 100%;
		box-sizing: border-box;
		min-height: 400rpx;
		background: url('../../static/img/sign_pop.png') no-repeat;
		background-size: 100% 100%;
		padding: 160rpx 30rpx 30rpx;

		.num {
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 48rpx;
			line-height: 2;
		}
		.sm_num {
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 38rpx;
			line-height: 2;
			 font-weight: 500;
		}

		.botbox {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 15rpx;

			>view {
				width: 60%;
				text-align: center;
				padding: 4rpx 0;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 22rpx;
				color: #ffffff;
				font-size: 24rpx;
			}
		}
	}

	.count .daynumber {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.count .daynumber .day {
		margin-top: 50rpx;
	}

	.count {
		margin: 20rpx;
		padding: 30rpx;
		display: flex;
		/* text-align: center; */
		border-radius: 10px;
		flex-direction: column;
		/* justify-content: center; */
		background-color: #fff;
		/* align-items: center; */
	}

	.count .number {
		color: #fff;
		font-size: 60rpx;
		background-color: #94db98;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx;
	}

	.monthSum {
		color: red;
		font-size: 40rpx;
	}

	.count text {
		margin: 10rpx;
	}

	/* 	//按钮样式 */
	.zui-button {
		.btn_box {
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS < 11.2 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容 iOS >= 11.2 */
			box-sizing: border-box;
			width: 690rpx;
			margin: 0 auto;
			padding: 30rpx;
		}

		.anBtn {
			height: 100rpx;
			line-height: 100rpx;
			background: #504764;
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
			transform: scale(1);
			transition: all 0.25s;
			font-weight: bold;

			&.black {
				background: #504764;
			}

			&.yellow {
				background: #eeae4f;
			}
		}

		.anBtn:active {
			transform: scale(0.9);

			&.black {
				background: #3a3050;
			}

			&.yellow {
				background: #c29244;
			}
		}

		.anBtn::after {
			border: 0;
		}

		.anBtn[disabled] {
			color: #fff;

			&.black {
				background: #3a3050;
			}

			&.yellow {
				background: #c29244;
			}
		}

		.anBtn[disabled]:active {
			transform: scale(1);
			color: #fff;

			&.black {
				background: #3a3050;
			}

			&.yellow {
				background: #c29244;
			}
		}

		.anBtn[disabled]:not([type]) {
			transform: scale(1);
			color: #fff;

			&.black {
				background: #3a3050;
			}

			&.yellow {
				background: #c29244;
			}
		}
	}
</style>
